require(["../path/path.js"], () => {
	require(["jquery", "swiper", "jq-color" ,"template"], function($, Swiper,JQcolor,template) {
		
		let shop_img_temp="";
		// let url_id=window.location.search;
		if(window.location.search.indexOf("_id=")!=-1){
			let id=window.location.search.match(/_id=(.+)/)[1];
			$.ajax({
				url:"/get?productId="+id,
				success:function(msg){
					shop_img_temp=JSON.parse(msg).data.product_specs
					console.log(shop_img_temp);
				}
			})
		}
		
		
		//导航栏
		$(".banner_list").hover( 
			function(){  
				$("."+$(this).attr("lab")).stop().animate({"height":241},300)
			},
			function(){
				$("."+$(this).attr("lab")).stop().animate({"height":0},300)
			}
		)
		$(".head_banner").hover(
			function(){
				$(this).stop().animate({"height":241},300)
			},
			function(){
				$(this).stop().animate({"height":0},300)
			}
		)
		



		
		// 登录导航
		$(".login").hover(
			function(){
				$(".login_box").show();
			},
			function(){
				$(".login_box").hide();
			}
		)
		
		// 登录情况  //购物车信息
		let _cookieMsg=document.cookie;
		if(_cookieMsg){
			_cookieMsg=_cookieMsg.split("; ");
			for(let key of _cookieMsg){
				if(/^user_id/.test(key)){
					let user_msg=JSON.parse(key.substring(8));
					console.log(user_msg);
					if(/^user_id=/.test(key)){//判断cookie中有没用户名
						$(".login_btn i").css("color","red");
						// $(".yonghuming a").text("欢迎您，"+user_msg.id);
						$(".tuichu").show()
						let html_str=`<a href="">欢迎您，<span id="user_id">${user_msg.id}</span></a>`
						$(".yonghuming").removeClass("newstyle");
						$(".yonghuming").html(html_str)
						
						//请求服务器数据
						
					}
				}
				if(/^shop=/.test(key)){//购物车信息
					// console.log("cookie")
					let shop_msg=JSON.parse(key.substring(5));
					$(".shopping_car_btn i").css("color","red");
					
					let shop_count=0;
					for(let key in shop_msg){
						console.log(shop_msg[key].count)
						shop_count+=Number(shop_msg[key].count)
					}
					//商品个数
					$("#shop_count").show().text(shop_count);
					let tempStr=`
					<ul>
						<%var count=0;%>
						<%for(let key in data){%>
						<%count+=data[key].price*data[key].count%>
							<li>
								<div class="shopcar_img">
									<img src="//oss.static.nubia.cn/<%=data[key].image%>.png" >
								</div>
								<div class="shopcar_cont">
									<h3><%=data[key].color%></h3>
									<p> <%=data[key].price%><span>X<%=data[key].count%></span></p>
								</div>
							</li>
						<%}%>
					</ul>
					<div class="shop_car_bottom">
						<div class="t_price">
							合计：<span>￥<%=count%></span>
						</div>
						<a href="" class="newshopcar_btn">去购物车</a>
					</div>`
					
					let html=template.render(tempStr,{data:shop_msg})
					// console.log(shop_msg)
					$(".shopcar_box_cont").html(html);
					
					// console.log($(".newshopcar"))
					$(".newshopcar_btn").click(function(e){
						e.preventDefault();
						window.location.href="/html/shopping_car.html"
					})
				}
			}
			
		}
		
		//退出登录
		$(".tuichu").bind("click",function(e){
			e.preventDefault();
			let date=new Date();
			date.setDate(date.getDate()-10);
			//删除cookie登录信息
			document.cookie="user_id=null; expires="+date+"; path=/";
			document.cookie="shop=null; expires="+date+"; path=/";
			// 刷新页面
			window.history.go(0);
		})
		
		// 购物车
		$(".shopcar").hover(
			function(){
				$(".shopcar_box").show();
			},
			function(){
				$(".shopcar_box").hide();
			}
		)
		
		
		//左部分菜单列表
		$.ajax({
			url:"/left_menu_data",
			success:function(_data){
				_data=JSON.parse(_data).data.result;
				// console.log(_data);
				$.ajax({
					url:window.location.origin+"/left_menu",
					success:function(temp){
						// console.log(temp);
						let html=template.render(temp,{data:_data});
						// console.log(html)
						$(".banner_nav").html(html);
						fun1();
					}
				})
			}
		})
		
		
		
		//商品部分 
		$.ajax({
			url:"/shop_data",
			success:function(_data){
				_data=JSON.parse(_data).data;
				// console.log(_data);
				
				//轮播图
				$.ajax({
					url:"/swiper",
					success:function(temp){
						// console.log(temp);
						let html=template.render(temp,{data:_data});
						// console.log(html)
						$(".swiper-container").html(html);
						fun3();
					}
				})
				
				//商品上部分
				$.ajax({
					url:"/shop_top",
					success:function(temp){
						// console.log(temp);
						let html=template.render(temp,{data:_data});
						// console.log(html)
						$(".shop_top").html(html);
						fun2();
					}
				})
				
				//商品下部分 1
				$.ajax({
					url:"/shop_bottom01",
					success:function(temp){
						// console.log(temp);
						let html=template.render(temp,{data:_data});
						// console.log(html)
						$(".hot_center").html(html);
						// fun2();
					}
				})
				//商品下部分 2
				$.ajax({
					url:"/shop_bottom02",
					success:function(temp){
						// console.log(temp);
						let html=template.render(temp,{data:_data});
						// console.log(html)
						$(".view_center").html(html);
						// fun2();
					}
				})
			}
		})
		
		
		//跳转
		if(window.location.search!=""){
			url_id=window.location.search;
			if(/=.+/.test(url_id)){
				var url_id=window.location.search.match(/^\?.*=(.+)$/)[1]
				$.ajax({
					url:"/get?productId="+url_id,
					success:function(_data){
						_data=JSON.parse(_data).data;
						// console.log(_data);
						if(_data){
							$.ajax({
								url:"/shop_detail",
								success:function(temp){
									// console.log(temp);
									let html=template.render(temp,{data:_data});
									// console.log(html)
									$(".shop_xianqing").html(html);
									fun4();
								}
							})
						}else {
							document.write("404")
						}
					}
				})
			}else {
				document.write("404")
			}
			
		}
		
		
		
		
		function fun1(){
			// 轮播图导航
			$(".banner_nav_list>li").bind("mouseenter",function(){
				$(this).children().show();
				$(this).children("a").css("color","#e8340e")
			}).bind("mouseleave",function(){
				$(this).children(".banner_nav_menu").hide();
				$(this).children("a").css("color","#000")
			})
			
			$(".banner_nav_menu").children("li").hover(
				function(){
					$(this).children("a").stop().animate({"color":"#e8340e"},200)
				},
				function(){
					$(this).children("a").stop().animate({"color":"#000"},200)
				}
			)
		}
		
		function fun2() {
			// 服务列表
			$(".fuwu_list li").bind("mouseenter",function(){
				$(".fuwu_list li").children("a").removeClass("active")
				$(this).children("a").addClass("active");
			})
			
			
			// 商品
			$(".shop_all .box:not(.big_box)").hover(
				function(){
					$(this).children("a").children(".price").hide();
					$(this).children("a").children(".buy_btn").show();
					$(this).children("a").children(".shop_box").stop().animate({
						paddingTop:45
					},200)
				},
				function(){
					$(this).children("a").children(".price").show();
					$(this).children("a").children(".buy_btn").hide();
					$(this).children("a").children(".shop_box").stop().animate({
						paddingTop:54
					},200)
				}
			)
		}
		
		
		function fun3 (){
			// 轮播图
			var mySwiper = new Swiper('.swiper-container', {
				speed: 1000,
				loop: true, // 循环模式选项
				autoplay: {
					delay: 3000,
					// stopOnLastSlide: false,
					disableOnInteraction: false
				},
				effect : 'fade',
				//    // 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			})
		}
		
		
		function draw(sel,temp,data){
			let html=template.render(temp,{data});
			sel.html(html);
		}
		
		
		
		function fun4 (){
			// 商品图片下的是的四个图片点击事件
			$(".img_list_ul").children("li").click(function(){
				$(this).addClass("active_li").siblings().removeClass("active_li");
				// $(".img_box>img").src=$(this).children("img").src;
				$(".img_box>img").attr("src",$(this).children("img").attr("src"))
			})
			
			
			// 除去选择属性a标签的默认操作
			$(".shuxin table a").click(function(e){
				e.preventDefault();
				if($(this).attr("class")=="shuxin_color"){
					$(this).removeClass("shuxin_color")
				}else {
					$(this).addClass("shuxin_color").siblings().removeClass("shuxin_color")
				}
				
			})
			
			$(".select_color a").bind("click",function(){
				let index=$(this).attr("color_id");
				let temp=`
					<div class="img_box">
						<img src="//oss.static.nubia.cn/<%=data.images["0"]%>" alt="" symbol_id=<%=data.id%>>
					</div>
					
					<div class="img_list">
						<ul class="img_list_ul">
						
							<%for(let key in data.images){%>
								<%if(key==0){%>
									<li class="active_li">
										<img src="//oss.static.nubia.cn/<%=data.images[key]%>" alt="">
									</li>
								<%}else {%>
									<li>
										<img src="//oss.static.nubia.cn/<%=data.images[key]%>" alt="">
									</li>
								<%}%>
							<%}%>
							
						</ul>
					</div>
					
					<div class="fenxiang">
						<a href="" class="fx">分享</a>
						<a href="" class="sc">收藏</a>
					</div>
				`
				
				let msg_data=shop_img_temp[index];
				let html=template.render(temp,{data:msg_data});
				$(".shop_left").html(html);
				fun4();
			})
			
			
			// 加减数量
			$(".count_add").click(function(){
				let count=$(".count_num").text();
				if(count>1){
					$(".count_num").text(--count);
				}
			})
			$(".count_red").click(function(){
				let count=$(".count_num").text();
				$(".count_num").text(++count);
			})
			
			
			// 选择地址
			$(".add_a").click(function(e){
				// console.log($(this))
				e.preventDefault();
				$(".dialog").fadeIn(300);
				// $(".dialog").css("position","fixed");
				$("body").css("overflow","hidden");
			})
			//地址蒙板
			$(".close").click(function(){
				// alert("ok")
				$("body").removeAttr("style","overflow");
				$(".dialog").fadeOut(300);
			})
			
			//选取省份
			$(".sheng span").click(function(){
				// console.log($(this).text())
				$(".citys_s").text($(this).text()).removeClass("selectd_color");
				$(".citys_c").text("请选择").addClass("selectd_color");
				$(".sheng").css("display","none");
				$(".shi").css("display","block");
			})
			//选取市
			$(".shi span").click(function(){
				// console.log($(this).text())
				$(".citys_c").text($(this).text()).removeClass("selectd_color");
				$(".citys_x").text("请选择").addClass("selectd_color");
				// console.log("ok")
				$(".shi").css("display","none");
				$(".qu").css("display","block");
			})
			//选取区
			$(".qu span").click(function(){
				// console.log($(this).text())
				$(".citys_x").text($(this).text()).removeClass("selectd_color");
				$("body").removeAttr("style","overflow");
				$(".dialog").fadeOut(300);
				$("#s").text($(".citys_s").text());
				$("#c").text($(".citys_c").text());
				$("#x").text($(".citys_x").text());
			})
			
			
			//省份城市区按钮效果
			$(".citys_s").click(function(){
				$(this).text("请选择").addClass("selectd_color");
				$(".citys_c").text("").removeClass("selectd_color");
				$(".citys_x").text("").removeClass("selectd_color");
				$(".sheng").css("display","block");
				$(".shi").css("display","none");
				$(".qu").css("display","none");
			})
			$(".citys_c").click(function(){
				$(this).text("请选择").addClass("selectd_color");
				$(".citys_x").text("").removeClass("selectd_color");
				$(".shi").css("display","block");
				$(".qu").css("display","none");
			})
			$(".citys_x").click(function(){
				$(this).text("请选择").addClass("selectd_color");
			})
			
			
			//防抖  30s向数据库中修改一次用户操作
			let settime=(function(){
				let timer=null;
				return function(data){
					clearTimeout(timer);
					timer=setTimeout(function(){
						$.ajax({	//发送到服务器存储
						   type: "POST",
						   url: "/change",
						   data: "filename=user_shopList.json&data="+data
						});
					},500)
				}
			})()
			
			// 添加购物车
			$(".join_car,.now_buy").bind("click",function(e){
				e.preventDefault();
				// console.log($(".tuichu").css("display"))
				if($(".tuichu").css("display")=="none"){
					alert("请先等你您的账号再进行购买操作！")
				}else{
					setCookie();//点击添加购物车后执行
				}
			})
			$(".join_car").bind("click",function(){
				window.history.go(0);
			})
			$(".now_buy").bind("click",function(){
				window.open("shopping_car.html")
			})
			
			function setCookie(){//cookie操作商品数据
				window.shopinfor={};
				
				shopinfor.user_id=$("#user_id").text();
				shopinfor.id=$(".img_box img").attr("symbol_id");
				shopinfor.color=$(".shop_xinxi").text();
				shopinfor.count=$(".shop_count .count_num").text();
				shopinfor.price=$("._price span").text();
				shopinfor.image=$(".img_box img").attr("src").match(/\.cn\/(.+)\.png/)[1]
				
				
				console.log(shopinfor)
				//提取cookie中的数据
				let str=document.cookie;
				//已有数据就拷贝到数组中
				
				let cookieStr=str.split("; ");
				let temp=true;
				let shopArr=[];
				for(let key of cookieStr){
					// console.log(key);
					if(/^shop=/.test(key)){
						shopArr=JSON.parse(key.substring(5))
						for(let val of shopArr){
							// console.log(val);
							if(val.id==shopinfor.id){
								val.count=Number(shopinfor.count)+Number(val.count);
								temp=false;
							}
						}
					}
				}
				if(temp){
					// console.log("ok");
					shopArr.push(shopinfor);
				}
				let data=JSON.stringify(shopArr);//data是数组形式的json
				// console.log(data);
				document.cookie="shop="+data+";path=/";
				console.log("被点击了")
				console.log(data);
				settime(data);//将数据写入服务器
				
			}
		}
		
	})
})



